<template>
    <div class="content">
        <div class="register">
            <div><label for="">用户名：</label><input v-model="user.user" type="text"><span>aaaaaaaaa</span></div>
            <div><label for="">密码：</label><input v-model="user.password" type="password"></div>
            <div title="两次密码要一致"><label for="">确认密码：</label><input v-model="user.password2" type="password"></div>
            <div><label for="">姓名：</label><input v-model="user.name" type="text"></div>
            <div><label for="">出生年日：</label><input v-model="user.birthday" type="text"></div>
            <div><label for="">性别：</label><input v-model="user.gender" type="text"></div>
            <div><label for="">身份证号码：</label><input v-model="user.card_id" type="text"></div>
            <div><label for="">手机号码：</label><input v-model="user.phone" type="text"></div>
            <div><label for="">注册授权码：</label><input v-model="user.invite_code" type="text"></div>
            <div class="invite_code_div"><span class="invite_code">{{invite_code}}</span><button @click="get_invite_code()">获取授权码</button></div>
            <div class="button">
                <input @click="register" type="button" name="" id="" value="确定注册">
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name:'register',
    data(){
        return {
            user:{
                user:"",
                password:"",
                password2:"",
                name:"",
                birthday:"",
                gender:"",
                card_id:"",
                phone:"",
                invite_code:""
            },
            invite_code:"------",
            complete_invite_code:null,
            count:0
        }
    },
    methods:{
        register(){
            console.log("注册");
            if(this.check_data()==false){
                return
            }
            this.complete_invite_code[2]=this.user.invite_code.trim()
            this.$http({
                method:'post',
                url:'/ajax/api/register',
                data:{
                    new_user:this.user,
                    invite_code:this.complete_invite_code
                }
            }).then(data=>{
                console.log(data);
            })
        },
        get_invite_code(){
            this.count+=1
            this.$http({
                method:'post',
                url:'/ajax/api/get_invite_code',
                data:{
                    count:this.count
                }
            }).then(data=>{
                console.log(data);
                let arr = data.data.split(":")
                this.complete_invite_code = arr
                this.invite_code = arr[2]
            })
        },
        check_data(){  // 检查输入的信息是否正确
           if(!/^[a-zA-Z0-9_]$/.test(this.user.user)){
               
           }
        },
    }
}
</script>

<style lang='scss' scoped>
    .register{
        margin: 10px 50px;
        display: flex;
        // display: grid;
        flex: 1;
        // background-color: pink;
        flex-direction: column;
        justify-content: center;
        // align-items: center;
        width: 300px;
        div{
            margin: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .invite_code_div{
            .invite_code{
                flex: 1;
                margin-right:10px;
                width: 100px;
                height: 30px;
                line-height: 30px;
                font-size: 28px;
                text-align: center;
                font-weight: bolder;
                letter-spacing: 5px;
                background-color: rgba(192, 192, 192, 0.801);
            }
        }
        
        .button{
            margin:10px 10px;
            display: flex;
            justify-content: center;
            input{
                letter-spacing: 5px;
                width: 150px;
            }
        }
    }
</style>